<template>
  <div class="medicine-list-container">
    <!-- 搜索和筛选区域 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="queryParams" class="search-form">
        <el-form-item label="药品名称">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入药品名称"
            clearable
            @keyup.enter="handleSearch"
          />
        </el-form-item>

        <el-form-item label="药品类型">
          <el-select v-model="queryParams.type" placeholder="请选择药品类型" clearable>
            <el-option
              v-for="item in medicineTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon> 搜索
          </el-button>
          <el-button @click="resetQuery">
            <el-icon><Refresh /></el-icon> 重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 药品列表 -->
    <div class="medicine-list" v-loading="loading">
      <el-row :gutter="20">
        <el-col
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          v-for="(item, index) in medicineList"
          :key="index"
        >
          <el-card class="medicine-card" @click="viewMedicineDetail(item.id)">
            <div class="medicine-info">
              <h4 class="medicine-name">{{ item.name }}</h4>
              <div class="medicine-price">¥{{ item.price }}</div>
              <div class="medicine-type">{{ item.type }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 空数据提示 -->
      <el-empty v-if="medicineList.length === 0 && !loading" description="暂无药品数据" />
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[8, 16, 24, 32]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search, Refresh } from '@element-plus/icons-vue'
import { listMedicine } from '@/api/medicine'

const router = useRouter()

// 查询参数
const queryParams = reactive({
  name: '',
  type: '',
  pageNum: 1,
  pageSize: 8
})

// 药品类型选项
const medicineTypes = [
  { value: '解热镇痛药', label: '解热镇痛药' },
  { value: '感冒药', label: '感冒药' },
  { value: '清热解毒药', label: '清热解毒药' },
  { value: '维生素类', label: '维生素类' },
  { value: '镇咳药', label: '镇咳药' },
  { value: '解表药', label: '解表药' },
  { value: '消化系统药', label: '消化系统药' },
  { value: '心脑血管药', label: '心脑血管药' }
]

// 药品列表数据
const medicineList = ref([])

// 总记录数
const total = ref(0)

// 加载状态
const loading = ref(false)

// 获取药品列表
const getMedicineList = async () => {
  loading.value = true
  try {
    const res = await listMedicine(queryParams)
    medicineList.value = res || []
    total.value = res?.total || medicineList.value.length
  } catch (error) {
    console.error('获取药品列表失败', error)
    // 模拟数据
    medicineList.value = [
      { id: 1, name: '阿司匹林肠溶片', price: 15.8, type: '解热镇痛药', image: '' },
      { id: 2, name: '布洛芬缓释胶囊', price: 22.5, type: '解热镇痛药', image: '' },
      { id: 3, name: '感冒灵颗粒', price: 12.8, type: '感冒药', image: '' },
      { id: 4, name: '板蓝根颗粒', price: 10.5, type: '清热解毒药', image: '' },
      { id: 5, name: '维生素C片', price: 18.0, type: '维生素类', image: '' },
      { id: 6, name: '复方甘草片', price: 9.5, type: '镇咳药', image: '' },
      { id: 7, name: '藿香正气水', price: 16.8, type: '解表药', image: '' },
      { id: 8, name: '牛黄解毒片', price: 25.0, type: '清热解毒药', image: '' }
    ]
    total.value = medicineList.value.length
  } finally {
    loading.value = false
  }
}

// 搜索处理
const handleSearch = () => {
  queryParams.pageNum = 1
  getMedicineList()
}

// 重置查询
const resetQuery = () => {
  queryParams.name = ''
  queryParams.type = ''
  queryParams.pageNum = 1
  getMedicineList()
}

// 处理每页条数变化
const handleSizeChange = (size) => {
  queryParams.pageSize = size
  getMedicineList()
}

// 处理页码变化
const handleCurrentChange = (page) => {
  queryParams.pageNum = page
  getMedicineList()
}

// 查看药品详情
const viewMedicineDetail = (id) => {
  router.push(`/user/medicine/detail/${id}`)
}

// 组件挂载时获取数据
onMounted(() => {
  getMedicineList()
})
</script>

<style scoped>
.medicine-list-container {
  padding: 20px 0;
}

.search-card {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
}

.medicine-list {
  margin-bottom: 20px;
  min-height: 300px;
}

.medicine-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.medicine-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.medicine-image {
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.medicine-image .el-image {
  width: 100%;
  height: 100%;
}

.medicine-info {
  padding: 10px;
}

.medicine-name {
  margin: 0 0 10px 0;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.medicine-price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.medicine-type {
  color: #909399;
  font-size: 14px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
